<template>
	<div class="vip-detail-points-record">
		<!-- 卡片 -->
		<div class="points-card">
			<el-row :gutter="10">
				<el-col :xs="12" :sm="8" :md="8">
					<div class="app-main-content-box"><OnePointCard :data="cardData_1" /></div>
				</el-col>
				<el-col :xs="12" :sm="8" :md="8">
					<div class="app-main-content-box"><OnePointCard :data="cardData_2" /></div>
				</el-col>
				<el-col :xs="12" :sm="8" :md="8">
					<div class="app-main-content-box"><OnePointCard :data="cardData_3" /></div>
				</el-col>
			</el-row>
		</div>

		<div class="app-main-content-box">
			<!-- 筛选 -->
			<div class="filter">
				<!-- 筛选 -->
				<div class="app-main-filter-collapse-box filter">
					<el-collapse>
						<el-collapse-item ref="filterCollapse" title="按条件筛选" name="1">
							<el-form ref="filterForm" :model="filterForm" label-width="100px" size="small">
								<el-form-item label="选择时间：" prop="date">
									<el-date-picker
										v-model="filterForm.date"
										type="datetimerange"
										range-separator="~"
										value-format="yyyy-MM-dd HH:mm:ss"
										start-placeholder="开始日期"
										end-placeholder="结束日期"
									/>
								</el-form-item>
								<el-form-item label="业务类型：" prop="bizCode">
									<el-radio-group v-model="filterForm.bizCode">
										<el-radio label="all">全部</el-radio>
										<template v-for="(item, index) in manageBizCodeOptions">
											<el-radio :key="index" :label="item.key">{{ item.label }}</el-radio>
										</template>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="业务来源：" prop="sourceCode">
									<el-radio-group v-model="filterForm.sourceCode">
										<el-radio label="all">全部</el-radio>
										<template v-for="(item, index) in sourceCodeOptions">
											<el-radio :key="index" :label="item.key">{{ item.label }}</el-radio>
										</template>
									</el-radio-group>
								</el-form-item>
								<!-- <el-form-item label="类型：" prop="sources">
                  <el-checkbox
                    :indeterminate="isIndeterminateSources"
                    v-model="checkAllSources"
                    @change="handleCheckAllSourcesChange"
                    class="fl"
                  >全选</el-checkbox>
                  <el-checkbox-group
                    v-model="filterForm.sources"
                    @change="handleCheckBusinessTypeChange"
                  >
                    <el-checkbox
                      :label="item"
                      v-for="(item,index) in sourcesOption"
                      :key="index"
                    >{{item}}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>-->
								<el-form-item class="filter-btn">
									<el-button type="primary" round @click="submitForm('filterForm')">查 询</el-button>
									<el-button round @click="resetForm('filterForm')">重 置</el-button>
								</el-form-item>
							</el-form>
						</el-collapse-item>
					</el-collapse>
				</div>
			</div>

			<!-- 列表 -->
			<div class="consume-table">
				<el-table v-loading="tableLoading" :data="list" size="small" border style="width: 100%" empty-text="暂无数据">
					<el-table-column prop="createTime" label="变动时间" width="150" fixed="left" />
					<!-- <el-table-column prop="businessSource" label="变动类型"></el-table-column> -->
					<el-table-column prop="businessSource" label="业务类型">
						<template slot-scope="scope">
							{{ bizCodeKeyOptions[scope.row.bizCode] }}
						</template>
					</el-table-column>
					<el-table-column prop="businessSource" label="业务来源">
						<template slot-scope="scope">
							{{ sourceCodeKeyOptions[scope.row.sourceCode] }}
						</template>
					</el-table-column>
					<el-table-column prop="points" label="变动积分">
						<template slot-scope="scope">
							<span :class="scope.row.points > 0 ? 'app-text-color-danger' : 'app-text-color-success'">
								{{ scope.row.points > 0 ? '+' + scope.row.points : scope.row.points | parseNumberToThousands(0, false) }}
							</span>
						</template>
					</el-table-column>
					<el-table-column prop="allPoints" label="变动后总积分" />
					<el-table-column prop="shopName" label="消费门店">
						<template slot-scope="scope">
							<span>{{ scope.row.shopName ? scope.row.shopName : '总部' }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="kdEndpoint" label="消费终端" />
					<el-table-column prop="operator" label="操作人" />
					<el-table-column prop="businessOrder" label="业务单号" />
					<el-table-column prop="remark" label="备注" />
				</el-table>

				<!-- 分页 -->
				<pagination-direction v-if="paginationConfig.total !== 0" :config="paginationConfig" @sizeschange="sizesChange" @pagechange="pageChange" />
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { getPointsChangeRecordsList } from '@/api/statement';
import OnePointCard from './OnePointCard';
export default {
	components: {
		OnePointCard
	},
	props: {
		activeName: {
			type: String,
			require: true
		},
		vipDetail: {
			type: Object,
			require: true
		}
	},
	data() {
		return {
			// 配置
			// 分页配置
			paginationConfig: {
				direction: 'center', // 分页位置
				layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
				pageSizes: [10, 20], // 分页pages
				total: 0,
				page: 1, // 页数-默认1
				pageSize: 10 // 每页条数-默认10
			},
			sourcesOption: [
				'消费奖励',
				'消费退款回收',
				'线上充值奖励',
				'推广会员奖励',
				'升级会员奖励',
				'积分兑换',
				'支付抵现',
				'支付退款返还',
				'积分清零',
				'会员导入',
				'人工客服增加',
				'人工客服扣除'
			],
			// 状态
			checkAllSources: true, // sources 多选状态
			isIndeterminateSources: false, // sources
			tableLoading: true, // 表格loading
			// 数据
			// 卡片数据
			cardData_1: ['总积分', 0],
			cardData_2: ['累计获得', 0],
			cardData_3: ['累计消费', 0],
			list: [], // 表格数据
			filterForm: {
				bizCode: 'all',
				sourceCode: 'all',
				date: []
				// sources: [
				//   "消费奖励",
				//   "消费退款回收",
				//   "线上充值奖励",
				//   "推广会员奖励",
				//   "升级会员奖励",
				//   "积分兑换",
				//   "支付抵现",
				//   "支付退款返还",
				//   "积分清零",
				//   "会员导入",
				//   "人工客服增加",
				//   "人工客服扣除"
				// ]
			}
		};
	},
	watch: {
		activeName(val) {
			if (val === 'point') {
				this.fetchData();
				this.setCardData();
			}
		}
	},
	computed: {
		...mapGetters(['manageBizCodeOptions', 'sourceCodeOptions', 'bizCodeKeyOptions', 'sourceCodeKeyOptions'])
	},
	mounted() {},
	methods: {
		// 获取记录数据
		fetchData(page = this.paginationConfig.page, pageSize = this.paginationConfig.pageSize) {
			this.$refs.filterForm.validate(valid => {
				if (valid) {
					this.filterForm.page = page;
					this.filterForm.pageSize = pageSize;
					this.filterForm.memberId = this.vipDetail.member.id;
					const params = Object.assign({}, this.filterForm);
					params.startTime = params.date ? params.date[0] : '';
					params.endTime = params.date ? params.date[1] : '';
					// params.sources =
					//   params.sources.length == this.sourcesOption.length
					//     ? ""
					//     : params.sources.join(",");
					delete params.date;
					// 清除多余字段
					for (const key in params) {
						if (params[key] === '' || params[key] === 'all') {
							delete params[key];
						}
					}
					this.tableLoading = true;
					getPointsChangeRecordsList(params)
						.then(res => {
							this.tableLoading = false;
							this.list = res.data.list;
							this.paginationConfig.total = res.data.total;
							this.paginationConfig.page = res.data.pageNum;
						})
						.catch(err => {
							this.tableLoading = false;
						});
				}
			});
		},

		// 设置卡片
		// setCardData() {
		// 	this.cardData_1 = ['总积分', this.$options.filters.parseNumberToThousands(this.vipDetail.points, 0, false)];
		// 	this.cardData_2 = ['累计获得', this.$options.filters.parseNumberToThousands(this.vipDetail.sumPoints, 0, false)];
		// 	this.cardData_3 = ['累计消费', this.$options.filters.parseNumberToThousands(this.vipDetail.sumConsumePoints, 0, false)];
		// },
		setCardData() {
			this.cardData_1 = [
				{
					label: '总积分',
					value: this.$options.filters.parseNumberToThousands(this.vipDetail.points, 0, false)
				},
				{
					label: '含超级会员积分',
					value: this.$options.filters.parseNumberToThousands(this.vipDetail.superMemberPoints, 0, false)
				}
			];
			this.cardData_2 = [
				{
					label: '累计获得',
					value: this.$options.filters.parseNumberToThousands(this.vipDetail.sumPoints, 0, false)
				},
				{
					label: '含超级会员积分',
					value: this.$options.filters.parseNumberToThousands(this.vipDetail.sumSuperMemberPoints, 0, false)
				}
			];
			this.cardData_3 = [
				{
					label: '累计消费',
					value: this.$options.filters.parseNumberToThousands(this.vipDetail.sumConsumePoints, 0, false)
				},
				{
					label: '含超级会员积分',
					value: this.$options.filters.parseNumberToThousands(this.vipDetail.sumConsumeSuperMemberPoints, 0, false)
				}
			];
		},

		// 分页sizes改变
		sizesChange() {
			this.fetchData();
		},

		// 分页page改变
		pageChange() {
			this.fetchData();
		},

		// 查询
		submitForm() {
			this.fetchData(1);
		},

		// 重置
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.checkAllSources = true; // sources 多选状态
			this.isIndeterminateSources = false; // sources
		},

		/**
		 * 状态
		 */
		// checkAllSources多选状态
		handleCheckAllSourcesChange(val) {
			if (val) {
				this.filterForm.sources = this.sourcesOption;
				this.checkAllSources = true;
			} else {
				this.filterForm.sources = [];
				this.checkAllSources = false;
			}
			this.isIndeterminateSources = false;
		},

		handleCheckBusinessTypeChange(value) {
			const checkedLength = value.length;
			const maxLength = this.sourcesOption.length;
			this.checkAllSources = checkedLength === maxLength;
			this.isIndeterminateSources = checkedLength > 0 && checkedLength < maxLength;
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.vip-detail-points-record {
	.points-card {
		.app-main-content-box {
			margin-bottom: 10px;
		}
	}

	/* 重置多选左边距 */
	.el-checkbox + .el-checkbox {
		margin-left: 0;
	}
	.el-checkbox {
		margin-right: 10px;
	}
}

/* 单选换行 */
.el-radio + .el-radio {
	margin-left: 0;
}
.el-radio {
	margin-right: 10px;
	line-height: 32px;
}
</style>
